<template>
    <div class="box">
        <div class="box-1">订单管理</div>
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
                <el-select v-model="searchType" placeholder="查询条件">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-input v-model="searchName" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" style="background:#337AB7;width:50px;height:36px" @click="search()">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table border :data="list" stripe style="width: 100%">
            <el-table-column label="订单号">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="dialog(scope.row)">{{scope.row.orderNo}}</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="receiverName" label="收件人" width="180"></el-table-column>
            <el-table-column prop="statusDesc" label="订单状态"></el-table-column>
            <el-table-column prop="payment" label="订单总价"></el-table-column>
            <el-table-column prop="createTime" label="创建时间"></el-table-column>
            <el-table-column prop="right" label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="dialog(scope.row)">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 公共组件分页器 -->
        <sorter :total="total" :currentPage3="currentPage3" v-on:sorter="handleCurrentChange"></sorter>
    </div>
   
</template>
<script>
import { Order } from "@/request/http";
import { orderPage } from "@/request/http";
import sorter from "@/common/sorter"         //公共组件分页器
import { mapState,mapMutations,mapGetters,mapActions } from 'vuex'
   export default {
        name:'Commodity',
        components:{
            sorter
        },
        data() {
            return {
                list:[],
                searchType:'',
                searchName:"",
                options: [{value: '1',label: '按订单号查询'}],
                // value:'1',
                pageNum:1,
                total:0
            };
        },
        methods:{
            commodity(){
                Order(this.pageNum)
                .then(data=>{
                    data = data.data.data
                    this.total=data.total
                    this.list=data.list
                    // console.log(this.list)
                })
            },
            handleCurrentChange(val){
                this.pageNum=val
                this.commodity()
            },
            search(){
                if (this.searchName!="") {
                    var str=[]
                    this.list.filter((itme)=>{
                        if (itme.orderNo==Number(this.searchName)) {
                            str.push(itme)
                        }
                    })
                    this.list=str
                    this.searchName=""
                }else{
                    this.commodity()
                    this.searchName=""
                }
            },
            ...mapMutations("a",['scope']),
            dialog(scope){
                this.scope(scope)
                this.$router.push("lineitem");
                // console.log(scope)
            }
        },
        mounted(){
            this.commodity()
        },
   };
</script>
<style lang="scss" scoped>

@import "@/Scss/index.scss";
.box{
    height: 92vh;overflow: scroll;
    padding: 0rem 2rem 5rem 2rem;
    background: #F3F3F3;
}
.box-1{
    @include FontOnly(2rem);
    @include Pd(1rem 0 1rem 0);
}
</style>